<template>
  <div class="leftBox">
        <el-menu
          default-active="$route.fullPath"
          class="el-menu-vertical-demo"
          :class="!sidebar?'left-w':'right-w'"
          background-color="#0d2439"
          text-color="#fff"
          active-text-color="#65a8f2"
          :router="true"
          :collapse="sidebar"
          unique-opened
        >
            <el-submenu v-for="item in routes" :key="item.path" :index="item.path" v-show="item.meta.type == type || type == 1">
              <template slot="title">
                <i class="iconfont" :class="item.meta.icon"></i>
                <span>{{item.meta.title}}</span>
              </template>
              <el-menu-item v-for="i in item.children" :key="item.path + '/' + i.path" :index="item.path+ '/' + i.path">{{i.meta.title}}</el-menu-item>
            </el-submenu>
        </el-menu>
      </div>
</template>

<script>
// 引入vuex 工具方法
import { mapGetters } from "vuex";
export default {
    name:"Sidebar",
    data(){
      return {
        routes:[],
      };
    },
    computed:{
      ...mapGetters(["sidebar","type"]),
    },
    created () {
      console.log(this.$router);
      // 获取路由数据，重组，保存到本地变量
      let routes = [];
      this.$router.options.routes.forEach(item=>{
        if(item.meta){
          routes.push(item);
        }
      });
      this.routes = routes;
      console.log(routes);
    }
}
</script>

<style scoped lang="scss">
 .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 167px;
    min-height: 400px;
  }
.el-menu{
  border-right:none;
}
.iconfont{
  font-size: 18px;
  padding-right:5px;
}
.left-w{
  width:167px;
}
.right-w{
  width:64px;
}
.leftBox {
  background: #0d2439;
  color: #fff;
  overflow: hidden;
}
</style>